﻿{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}项目管理{% endblock %}
{% block css %}{% endblock %}
{% block content %}
    <div class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-light">
                        <i class="fa fa-home"></i>&nbsp;首页&nbsp;<i class="fa fa-angle-right"></i>&nbsp;项目管理

                    </div>

                    <div class="card-body">
                        <button type="button" class="btn btn-rounded btn-info btn-secondary btn-sm"
                                data-toggle="modal" data-target="#modal-1">
                            <i class="fa fa-plus"></i></i>&nbsp;新建项目
                        </button>
                        <!--新建项目模态框-->
                        <div class="modal fade" id="modal-1" tabindex="-1" role="dialog"
                             aria-labelledby="exampleModalLabel"
                             aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content" style="width: 90%">
                                    <div class="modal-header">
                                        <h5 class="modal-title">新建项目</h5>
                                        <button type="button" class="close" data-dismiss="modal"
                                                aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>

                                    <div class="modal-body p-4">
                                        <div class="form-group">
                                            <label class="form-control-label">项目名称</label>
                                            <input id="add_project_name" type="text"
                                                   class="form-control">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-control-label">项目描述</label>
                                            <textarea id="add_project_describe"
                                                      class="form-control"></textarea>
                                        </div>

                                        <div class="form-group">
                                            <label for="single-select">状态</label>
                                            <select id="add_project_status" class="form-control">
                                                <option>开启</option>
                                                <option>关闭</option>
                                            </select>
                                        </div>

                                    </div>

                                    <div class="modal-footer border-0">
                                        <button type="button"
                                                class="btn btn-link btn-rounded btn-secondary"
                                                data-dismiss="modal">
                                            取消
                                        </button>
                                        <button type="button" class="btn btn-rounded btn-secondary"
                                                onclick="project_add(this)">提交
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <button type="button" class="btn btn-rounded btn-danger btn-sm" data-toggle="modal"
                                data-target="#modal-4" data-remote="/projects/batch-delete">
                            <i class="fa fa-ban"></i>&nbsp;批量删除
                        </button>
                        <!--批量删除模态框-->
                        <div class="modal fade" id="modal-4" tabindex="-1" role="dialog"
                             aria-labelledby="exampleModalLabel"
                             aria-hidden="true">
                            <div class="modal-dialog modal-sm" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">提示</h5>
                                        <button type="button" class="close" data-dismiss="modal"
                                                aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <h6>确定删除勾选的所有项目吗?</h6>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button"
                                                class="btn btn-link btn-rounded btn-secondary"
                                                data-dismiss="modal">
                                            取消
                                        </button>
                                        <button type="submit"
                                                class="btn btn-rounded btn-secondary" onclick="batch_delete(this)">确定
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--搜索-->
                        <div class="col-md-3" style="float: right;top:-8px">
                            <form class="navbar-form navbar-right" action="{% url 'projects:project_search' %}"
                                  method="get">
                                <div class="input-group">
                                    <input type="text" id="input-group-2" name="input1-group2" class="form-control"
                                           placeholder="输入项目名" style="border-radius:20px">
                                    <span class="input-group-btn">
                                        <button type="submit" class="btn btn-secondary" style="border-radius:20px"><i
                                                class="fa fa-search"></i> Search</button>
                                </span>
                                </div>
                            </form>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover text-center">
                                <thead>
                                <tr>
                                    <th width="80"><input style="position:relative;top:2px;" type="checkbox" id="checkAll" name="checkAll"/>&nbsp;全选</th>
                                    <th>id</th>
                                    <th>项目名称</th>
                                    <th>项目描述</th>
                                    <th>状态</th>
                                    <th>更新时间</th>
                                    <th class="text-center">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for project in pro_list.object_list %}
                                    <tr>
                                        <td><input type="checkbox" value={{ project.id }} name="checkItem" /></td>
                                        <td id="project_id" width="10">{{ project.id }}</td>
                                        <td id="project_name" class="text-nowrap" data-toggle="modal" data-target="#modal-2" onclick="edititem1(this)" style="color: #1e94f3">{{ project.name }}</td>
                                        <td id="project_describe">{{ project.describe }}</td>
                                        <td id="project_status">{% if project.status %}开启{% else %}关闭{% endif %}</td>
                                        <td>{{ project.create_time }}</td>
                                        <td class="text-center" width="160">

                                            <button type="button"
                                                    class="btn btn-rounded btn-success btn-secondary btn-sm"
                                                    data-toggle="modal" data-target="#modal-2" onclick="edititem(this)">
                                                <i class="fa fa-pencil-alt"></i>&nbsp;编辑
                                            </button>

                                            <button type="button"
                                                    class="btn btn-rounded btn-warning btn-sm"
                                                    data-toggle="modal" data-target="#modal-3" onclick="delitem(this)">
                                                <i class="fa fa-trash"></i>&nbsp;删除
                                            </button>
                                        </td>
                                        <!--编辑项目模态框-->
                                        <div class="modal fade" id="modal-2" tabindex="-1" role="dialog"
                                             aria-labelledby="exampleModalLabel"
                                             aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content" style="width: 90%">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">编辑项目</h5>
                                                        <button type="button" class="close" data-dismiss="modal"
                                                                aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>

                                                    <div class="modal-body p-4">
                                                        <div class="form-group">
                                                            <label class="form-control-label">项目编号</label>
                                                            <input id="project_id" type="text"
                                                                   class="form-control" readonly>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="form-control-label">项目名称</label>
                                                            <input id="project_name" type="text"
                                                                   class="form-control">
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="form-control-label">项目简介</label>
                                                            <textarea id="project_describe"
                                                                      class="form-control"></textarea>
                                                        </div>

                                                        <div class="form-group">
                                                            <label for="single-select">项目状态</label>
                                                            <select id="project_status" class="form-control">
                                                                <option>开启</option>
                                                                <option>关闭</option>
                                                            </select>
                                                        </div>

                                                    </div>

                                                    <div class="modal-footer border-0">
                                                        <button type="button"
                                                                class="btn btn-link btn-rounded btn-secondary"
                                                                data-dismiss="modal">
                                                            取消
                                                        </button>
                                                        <button type="button"
                                                                class="btn btn-rounded btn-secondary"
                                                                onclick="project_edit(this)">提交
                                                        </button>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <!--删除项目模态框-->
                                        <div class="modal fade" id="modal-3" tabindex="-1" role="dialog"
                                             aria-labelledby="exampleModalLabel"
                                             aria-hidden="true">
                                            <div class="modal-dialog modal-sm" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">提示</h5>
                                                        <button type="button" class="close" data-dismiss="modal"
                                                                aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <h6>确定删除项目《<span id="del_project_id"></span>》吗?</h6>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button"
                                                                class="btn btn-link btn-rounded btn-secondary"
                                                                data-dismiss="modal">
                                                            取消
                                                        </button>

                                                        <button type="button"
                                                                class="btn btn-rounded btn-secondary"
                                                                onclick="project_delete(this)">
                                                            确定
                                                        </button>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </tr>

                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div class="#" style="float: right">
                            <!-- Pagination分页 -->
                            <nav aria-label="Page navigation example">
                                <ul class="pagination pagination-template d-flex justify-content-center">
                                    {% if pro_list.has_previous %}
                                        <li class="page-item">
                                            <a href="?{{ pro_list.previous_page_number.querystring }}"
                                               class="page-link" aria-label="Previous">
                                                <span aria-hidden="true">上一页</span>
                                            </a>
                                        </li>
                                    {% endif %}
                                    {% for page in pro_list.pages %}
                                        {% if page %}
                                            {% ifequal page pro_list.number %}
                                                <li class="page-item active"><a
                                                        href="?{{ page.querystring }}" class="page-link">{{ page }}</a>
                                                </li>
                                            {% else %}
                                                <li class="page-item"><a href="?{{ page.querystring }}"
                                                                         class="page-link">{{ page }}</a>
                                                </li>
                                            {% endifequal %}
                                        {% else %}
                                            <li class="page-item"><a href="" class="page-link">...</a></li>
                                        {% endif %}
                                    {% endfor %}
                                    {% if pro_list.has_next %}
                                        <li class="page-item">
                                            <a href="?{{ pro_list.next_page_number.querystring }}"
                                               class="page-link" aria-label="Next">
                                                <span aria-hidden="true">下一页</span>
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>
                        <select id="page666" onchange="window.location=this.value">
                            {% for num in nums_list %}
                                {% ifequal num page_num %}
                                    <option value="?nums={{ num }}" selected="selected">{{ num }}</option>
                                {% else %}
                                     <option value="?nums={{ num }}">{{ num }}</option>
                                {% endifequal %}

                            {% endfor %}
                        </select>
                        <label>条/页</label>&nbsp;
                        <label>显示 {{ start }} 到 {{ end }} 条，共 {{ counts }} 条</label>&nbsp;
                    </div>

                </div>
            </div>

        </div>


    </div>
{% endblock %}
{% block custom_js %}

{#     <script>#}
{#     //slected选择后，页面刷新不改变#}
{#        var page = document.getElementById('page666')#}
{#        page.onchange = function () {#}
{#            localStorage.value = this.value;#}
{#            localStorage.index = this.selectedIndex;#}
{#            window.location=this.value;#}
{##}
{#        };#}
{##}
{#        window.onload = function () {#}
{#            page.options[localStorage.index].selected = true;#}
{##}
{#        }#}
{#    </script>#}
    <script>
        $(function () {
            $('#modal-1').modal('hide')
            $('#modal-2').modal('hide')
            $('#modal-3').modal('hide')
            $('#modal-4').modal('hide')
        });
    </script>
    <script>
    $(document).ready(function(){

        $(".modal-dialog").draggable();//为模态对话框添加拖拽


    })
</script>
    <script>
        //模态框框关闭后刷新页面
        $(function () {
             $('#modal-1').on('hide.bs.modal', function () {
                window.location.reload();
            })
            $('#modal-2').on('hide.bs.modal', function () {
                window.location.reload();
            })
             $('#modal-3').on('hide.bs.modal', function () {
                window.location.reload();
            })
             $('#modal-4').on('hide.bs.modal', function () {
                window.location.reload();
            })
        });
    </script>

    <script>
        //利用Ajax发送请求到后端,新建项目
        function project_add(obj) {
            var sr = $(obj).parent().prev();
            var project_name = sr.find("input#add_project_name").val();
            var project_describe = sr.find("textarea#add_project_describe").val();
            var project_status = sr.find("select#add_project_status").val();
            if (project_name !== '' && project_describe !== '') {
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: "{% url 'projects:project_add'%}",
                    data: {
                        'project_name': project_name,
                        'project_describe': project_describe,
                        'project_status': project_status
                    },
                    async: true,
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    },
                    success: function (data) {
                        if (data.status == 'success') {
                            window.location.href = "{% url 'projects:project_list' %}";
                        }

                    },
                });

            }


        }
    </script>

    <script>
        //传入需要编辑的数据到模态框
        function edititem(obj) {
            var tr = $(obj).parent().parent();
            var project_id = tr.children("td#project_id").text();
            var project_name = tr.children("td#project_name").text();
            var project_describe = tr.children("td#project_describe").text();
            var project_status = tr.children("td#project_status").text();
            $('#project_id').val(project_id);
            $('#project_name').val(project_name);
            $('#project_describe').val(project_describe);
            $('#project_status').val(project_status);
            $('#modal-2').modal('show')

        };
    </script>
    <script>
        //传入需要编辑的数据到模态框
        function edititem1(obj) {
            var tr = $(obj).parent();
            var project_id = tr.children("td#project_id").text();
            var project_name = tr.children("td#project_name").text();
            var project_describe = tr.children("td#project_describe").text();
            var project_status = tr.children("td#project_status").text();
            $('#project_id').val(project_id);
            $('#project_name').val(project_name);
            $('#project_describe').val(project_describe);
            $('#project_status').val(project_status);
            $('#modal-2').modal('show')

        };
    </script>
    <script>
        //前端数据修改后，通过Ajax发送请求到后端
        function project_edit(obj) {
            var sr = $(obj).parent().prev();
            var project_id = sr.find("input#project_id").val();
            var project_name = sr.find("input#project_name").val();
            var project_describe = sr.find("textarea#project_describe").val();
            var project_status = sr.find("select#project_status").val();
            if (project_name !== '' && project_describe !== '') {
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: "{% url 'projects:project_edit' %}",
                    data: {
                        'project_id': project_id,
                        'project_name': project_name,
                        'project_describe': project_describe,
                        'project_status': project_status
                    },
                    async: true,
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    },
                    success: function (data) {
                        if (data.status == 'success') {
                            window.location.href = "{% url 'projects:project_list' %}";
                        }

                    },
                });

            }

        }
    </script>

    <script>
        //传入单个项目的id值到模态框
        function delitem(obj) {
            var tr = $(obj).parent().parent();
            var project_name = tr.children("td#project_name").text();
            $('#del_project_id').text(project_name);


        };
    </script>
    <script>
        //利用Ajax发送请求到后端，删除项目
        function project_delete(obj) {
            var sr = $(obj).parent().prev();
            var project_id = sr.find("span#del_project_id").text();
            $.ajax({
                cache: false,
                type: "POST",
                url: "{% url 'projects:project_delete'%}",
                data: {'project_id': project_id},
                async: true,
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status == 'success') {
                        window.location.href = "{% url 'projects:project_list' %}";
                    }

                },
            });
        }
    </script>


    <script>
        //实现列表全选功能
        $(function () {
            function initTableCheckbox() {
                var $thr = $('table thead tr');
                var $checkAllTh = $thr.find('input');
                /*将全选/反选复选框添加到表头最前，即增加一列*/
                /*“全选/反选”复选框*/
                var $checkAll = $thr.find('input');
                $checkAll.click(function (event) {
                    /*将所有行的选中状态设成全选框的选中状态*/
                    $tbr.find('input').prop('checked', $(this).prop('checked'));
                    /*并调整所有选中行的CSS样式*/
                    if ($(this).prop('checked')) {
                        $tbr.find('input').parent().parent().addClass('warning');
                    } else {
                        $tbr.find('input').parent().parent().removeClass('warning');
                    }
                    /*阻止向上冒泡，以防再次触发点击操作*/
                    event.stopPropagation();
                });
                /*点击全选框所在单元格时也触发全选框的点击操作*/
                $checkAllTh.click(function () {
                    $(this).find('input').click();
                });
                var $tbr = $('table tbody tr');
                /*每一行都在最前面插入一个选中复选框的单元格*/
                /*点击每一行的选中复选框时*/
                $tbr.find('input').click(function (event) {
                    /*调整选中行的CSS样式*/
                    $(this).parent().parent().toggleClass('warning');
                    /*如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态*/
                    $checkAll.prop('checked', $tbr.find('input:checked').length == $tbr.length ? true : false);
                    /*阻止向上冒泡，以防再次触发点击操作*/
                    event.stopPropagation();
                });
                /*点击每一行时也触发该行的选中操作*/
                /*$tbr.click(function () {
                    $(this).find('input').click();
                });*/
            }

            initTableCheckbox();
        });
    </script>
    <script>
        //利用Ajax发送请求到后端，删除项目
        function batch_delete(obj) {
            var ids = [];
            $("input[type='checkbox'][name='checkItem']:checked").each(function () {
                ids.push($(this).val());
            });
             $.ajax({
                cache: false,
                type: "POST",
                url: "{% url 'projects:project_batch_delete'%}",
                traditional: true,//添加该行后，ajax就可以传数组
                data: {'ids': ids},
                async: true,
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status == 'success') {
                        window.location.href = "{% url 'projects:project_list' %}";
                    }

                },
            });

        }
    </script>

{% endblock %}